I do not see there is a rule for this.

1. According to the questionnaire https://www.reddit.com/r/vuejs/comments/rmeoy7/what_order_do_you_have_your_template_and_script/
   • Major are Template then script
2. According to https://vuejs.org/guide/scaling-up/sfc.html
   • The <template>, <script>, and <style> blocks encapsulate and colocate the view, logic and styling of a component in the same file.
   • <template> also comes first.
3. According to https://vuejs.org/api/sfc-spec.html
   • First <template> then <script>
4. According to https://vuejs.org/style-guide/rules-recommended.html#single-file-component-top-level-element-order
   • <template> then <script> is "good", we are not violating

I'm fine with both

As I said, I find this order more logical because

• Imports are on top, like in every other programming language
• Return value (the template and CSS) is on bottom, similar to React

It does seem the Vue authors agree with me at least, the docs and https://play.vuejs.org both show this order.

As I said, I find this order more logical because
* Imports are on top, like in every other programming language
* Return value (the template and CSS) is on bottom, similar to React

I do not have such feeling because Vue SFC is not the same as React/JSX. React uses render to return the DOM, they are embedded into the Component class. But Vue SFC declares the template separately, they look more like HTML code, for HTML code, the intuition is we first have the HTML definition and bind JS code to it.

It does seem the Vue authors agree with me at least, the docs and https://play.vuejs.org both show this order.

See the comment above, they also agree with tempate - script - style

• https://vuejs.org/api/sfc-spec.html
• https://vuejs.org/style-guide/rules-recommended.html#single-file-component-top-level-element-order

Update: why the "play.vuejs.org" shows script first, because it is <script setup>, a totally new mechanism in Vue 3.

But we are still using <script> (no setup).

Personally I prefer to follow the majority (template - script(nosetup) - style) at the moment, until there are other best practices, while I won't block it. Or use modern Vue 3 (script(setup) - template - style)

Yes, Composition API is the modern way of writing vue components and to me it very much looks like a react hooks component. Composition API seems to prefer the script > template > style order as well. It seems similar to the Hooks vs. Class components in React, no one writes class components any more today in React.